import React from 'react';
import { Row, Col } from 'antd';
import AppCard from './AppCard';
import '@/styles/AppMarket.scss';

interface App {
  flowId: string;
  flowName: string;
  userName: string;
  description: string;
  downloadCount: number;
  likeCount: number;
  likedByUser: boolean;
  tags: { tagId: string; tagName: string }[];
}

interface AppMarketProps {
  apps?: App[]; // 将 apps 设置为可选
  loadMoreApps: () => void;
}

const AppMarket: React.FC<AppMarketProps> = ({ apps, loadMoreApps }) => {
  if (!apps) {
    return <div></div>; // 显示加载指示器
  }

  return (
    <div className="app-market" onScroll={loadMoreApps}>
      <Row gutter={[45, 15]}>
        {apps.map((app, index) => (
          <Col key={index} span={8}>
            <AppCard app={app} />
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default AppMarket;
